import React from 'react';
import Form, { FormComponentProps, ComponentDecorator } from 'antd/lib/form/Form';
import Item from './Item'
import Input from './Input'
import Select from './Select'
import Switch from './Switch'
import Radio from './Radio'
import Check from './Check'
import DatePicker from './DatePicker'
import TimePicker from './TimePicker'
import Cascader from './Cascader'
import Text from './Text'
import moment from 'moment'

declare type FormLayout = 'horizontal' | 'inline' | 'vertical';
interface IMyFormProps {
	model: object,
	onSubmit: (model: object) => void,
	layout?: FormLayout,
}
export interface IFormProps extends FormComponentProps, IMyFormProps {

}

export interface IFormDecoratorProps extends ComponentDecorator, IMyFormProps {
}
export const FormContext = React.createContext<IFormProps>({} as IFormProps);

class MyForm extends React.Component<IFormProps, any> {

	handleSubmit = (e: React.TouchEvent) => {
		e.preventDefault();
		let { form, onSubmit, model } = this.props;
		form.validateFieldsAndScroll((err: any, values: any) => {
			if (!err) {
				// console.log("表单校验成功后的数据：", values);
				const formData = form.getFieldsValue();
				// console.log("表单数据：", formData);

				model = { ...model, ...formData }
				// console.log(JSON.stringify(model) )
				onSubmit(model);
			}
		});
	}

	render() {
		const { children, layout } = this.props;
		return (
			<FormContext.Provider value={this.props}>
				<Form onSubmit={this.handleSubmit} layout={layout}>
					{children}
				</Form>
			</FormContext.Provider>

		)
	}
}

const Form1 = Form.create<IFormProps>()(MyForm)
export default class extends React.Component<IFormDecoratorProps, any> {
	render() {
		return (<Form1 {...this.props} />)
	}
	static Item = Item
	static Input = Input
	static Select = Select
	static Switch = Switch
	static Radio = Radio
	static Check = Check
	static DatePicker = DatePicker
	static TimePicker = TimePicker
	static Cascader = Cascader
	static Text = Text
}